<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>分数</th>
		</tr>
	</table>
</body>
</html>
<script>
	//localStorage是h5中的本地存储对象，存储的数据没有时间限制
	console.dir(localStorage);
    
     //添加或修改一条数据
	localStorage.setItem("score",100);
    //移除数据
	//localStorage.removeItem("score");
     //普通方式也可以
	localStorage.page = 20;
	localStorage["age"] = 20;
    //获取数据
	console.log(localStorage.getItem("age"));
	console.log(localStorage.page);
	console.log(localStorage["score"]);

	//遍历所有数据
	for (var i = 0;i < localStorage.length; i++){
		//获取key值
		var key = localStorage.key(i);
		console.log(key,localStorage[key]);

        var key = localStorage.key(i);
		console.log(key,localStorage[key]);

	}
	//清除所有数据
	// localStorage.clear();

	var stu1 = {
		name:"小明",
		age:20,
		gender:"男"
	};

	localStorage.stu = stu1;
	
	console.log(localStorage.stu);//[objedt,object]输出了字符串
     

     //localStorage存储数据时，会把数据转化成字符串
	localStorage.flag = true;
	console.log(localStorage.flag === "true");



	var stus = [
	{name:"小明",age:22,score:90},
	{name:"小红",age:21,score:88},
	{name:"小华",age:19,score:92}];

	//json数据是网络传输的一种数据格式，是数组和对象的字符串表示形式

	console.dir(JSON);
    //对象的序列化，对象转化成字符串
	var stuStr = JSON.stringify(stus);
	console.log(stuStr);
    
    //反序列化，将字符串转化为对象
	localStorage.stus = stuStr;
	var stusArr = JSON.parse(localStorage.stus);
	console.log(stusArr);
    
    var table = document.querySelector("table");
	stusArr.forEach(function(stu){

		//创建tr
		var tr = document.createElement("tr");

		//创建td
		var nameTd = document.createElement("td");
		var ageTd = document.createElement("td");
		var scoreTd = document.createElement("td");

		nameTd.innerHTML = stu.name;
		ageTd.innerHTML = stu.age;
		scoreTd.innerHTML = stu.score;

		tr.appendChild(nameTd);
		tr.appendChild(ageTd);
		tr.appendChild(scoreTd);
		table.appendChild(tr);






	});







</script>